<!--
 * @Description: 图片
 * @Author: bxsdhx
 * @Date: 2024-05-04 23:06:39
 * @LastEditTime: 2024-12-21 21:36:14
 * Copyright (C) 2024 bxsdhx. All rights reserved.
-->
<template>
  <ElImage
    :src="src"
    :data-src="src"
    :style="{
      width,
      height,
      minWidth: width,
      minHeight: height,
      borderRadius: radius,
    }"
    lazy
    :zoom-rate="1.2"
    :max-scale="7"
    :min-scale="0.2"
    :preview-src-list="previewList"
    :initial-index="previewIndex"
    fit="cover"
    preview-teleported
  >
  </ElImage>
</template>

<script setup lang="ts">
import { type PropType } from "vue";
import { ElImage } from "element-plus";
defineProps({
  /**
   * 图片地址
   */
  src: {
    type: String,
    default: "",
  },
  /**
   * 宽度
   */
  width: {
    type: String,
    default: "",
  },
  /**
   * 高度
   */
  height: {
    type: String,
    default: "",
  },
  /**
   * 圆角
   */
  radius: {
    type: String,
    default: "4px",
  },
  /**
   * 预览
   */
  previewList: {
    type: Array as PropType<string[]>,
    default: [],
  },
  /**
   * 预览索引
   */
  previewIndex: {
    type: Number,
    default: 0,
  },
});
</script>

<style lang="scss" scoped>
.el-image {
  cursor: pointer;
}
</style>
